import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table, InputNumber,DatePicker,Popconfirm,Radio,Row,Col,} from 'antd';
import moment from 'moment'
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option=Select.Option;

class InstockEditModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.props.form.resetFields();
    this.setState({
      visible: true,
    });
  };

 //修改机柜和U位之后保存，更改列表里的机柜和U位信息
  okHandler = () => {
    const { editPutOnHandle } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        editPutOnHandle(values);
      }
    });
  };
  render() {
    const { children, dispatch,title,item,rackList } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const getRack = data => data.map((item) => {
      return <Option key={item.id_+''}>{item.assetName}</Option>
    })

    return (
        <span>
          <Modal
                  maskClosable= {this.props.maskClosable}
                  confirmLoading= {this.props.confirmLoading}
                  title={this.props.title}
                  visible={this.props.visible}
                  onOk={this.okHandler}
                  onCancel={this.props.onCancel}
                  key={this.props.newKey}
          >
          <div style={{backgroundColor:'#fff'}}>
            <div style={{}}>
              <div style={{width:'100%',padding:'10px 20px 20px',}}>
                <Form layout={'horizontal'} onSubmit={this.okHandler}>
                          <FormItem style={{marginBottom:'0px'}}>
                            {getFieldDecorator('assetId',{initialValue:item.id_})(
                              <Input type="hidden"/>
                            )}
                          </FormItem>
                          <FormItem
                                {...formItemLayout}
                                label="资产编号"
                              >
                                {
                                  getFieldDecorator('assetNo', {
                                    initialValue: item.assetNo,
                                  })(<Input readOnly="readonly"/>)
                                }
                          </FormItem>

                          <FormItem
                              {...formItemLayout}
                              label="设备序列号"
                            >
                              {
                                getFieldDecorator('serialNo', {
                                  initialValue: item.serialNo
                                })(<Input readOnly="readonly" />)
                              }
                          </FormItem>

                          <FormItem
                            label="RFID编码"
                            hasFeedback
                            {...formItemLayout}
                          >
                            {getFieldDecorator('rfidNo', {
                                initialValue:item.rfidNo
                            })(<Input readOnly="readonly"/>)}
                          </FormItem>
                          <FormItem
                              {...formItemLayout}
                              label="所在机柜"
                              hasFeedback
                          >
                            {getFieldDecorator('rackId', {
                                initialValue:item.rackId? item.rackId + '': undefined,
                                rules: [{
                                  required: true, whitespace: true, message: '请选择所在机柜',
                                }]
                             })(
                                <Select
                                   showSearch
                                   placeholder="请选择机柜">
                                   {getRack(rackList)}
                            </Select>
                             )}
                          </FormItem>

                          <FormItem
                              {...formItemLayout}
                              label="起始U位"
                              hasFeedback
                            >
                            {getFieldDecorator('start', {
                                  initialValue: item.startU== null? '' : item.startU,
                                  rules: [{
                                    required: true,message: '请填写起始U位',
                                  }]
                                })(<InputNumber style={{width:250}} />)
                            }
                          </FormItem>
              </Form>
          </div>
        </div>
       </div>

        </Modal>

      </span>
    );
  }

}

export default Form.create()(InstockEditModal)
